<script lang="ts" setup>
import  * as  SchooleApi from "@/api/train/school";
import { onMounted, ref } from "vue";

// const newsStore = useNewsStore();

const value = ref<number>(0);

const list = ref({
  Leader:[],
  Service:[],
  Trainer:[]
})


const getEemployees = async () => {
  const res = await SchooleApi.getList().then((res)=>{
    console.info(res)
    list.value = res.data
  });
  
}

onMounted(() => {
  getEemployees();
})




</script>

<template>
  <!-- 顶部图片 -->
  <div>
    <img src="http://542x758968.bcc.eiewz.cn/m/images/product_banner.jpg" alt="" class="w-full" />
  </div>

  <nut-tabs v-model="value" auto-height size="large">
    <nut-tab-pane title="校领导" pane-key="0">
      <div v-for="item in list.Leader" class="flex items-center py-3 bg-white rd-2">
        <img class="w-35" :src="item?.avatar" alt="" />
        <div class="pb-2 px-2">
          <p><span>{{ item?.name }} </span> <span class="text-sm pl-2">{{ item?.professional }}</span></p>
          <p class="c-gray-4 text-sm">{{ item?.detail }}</p>
        </div>
      </div>
    </nut-tab-pane>
    <nut-tab-pane title="教练" pane-key="1">
      <div v-for="item in list.Trainer" class="flex items-center py-3 bg-white rd-2">
        <img class="w-35" :src="item?.avatar" alt="" />
        <div class="pb-2 px-2">
          <p>{{ item?.name }} <span class="text-sm pl-2">{{ item?.professional }}</span></p>
          <p class="c-gray-4 text-sm">{{ item?.detail }}</p>
        </div>
      </div>
    </nut-tab-pane>
    <nut-tab-pane title="机关客服" pane-key="2">
      <div v-for="item in list.Service" class="flex items-center py-3 bg-white rd-2">
        <img class="w-35" :src="item?.avatar" alt="" />
        <div class="pb-2 px-2">
          <p><span>{{ item?.name }}</span> <span class="text-sm pl-2">{{ item?.professional }}</span></p>
          <p class="c-gray-4 text-sm">{{ item?.detail }}</p>
        </div>
      </div>
    </nut-tab-pane>
  </nut-tabs>

  <!-- 培训风采 -->
</template>

<style>
.nut-tab-pane {
  padding: 0 20px;
}
</style>
